<template>
    <div>
        <el-button @click="addChapterVisibleForm" style="margin-left: 1100px" type="primary" size="small">新建章节
        </el-button>
        <el-tree
                :default-expand-all="true"
                :data="menuData"
                :props="menuProps"
        >
                     <span class="custom-tree-node" slot-scope="{ node }">
            <span>{{ node.label }}</span>
            <span>
                <el-tooltip class="item" effect="dark" content="播放" placement="top-start">
             <el-button
                     v-show="node.level === 2"
                     size="mini"
                     icon="el-icon-video-play" circle
                     @click="() => playVideo(node)">
            </el-button>
                </el-tooltip>
                 <el-tooltip class="item" effect="dark" content="添加小节" placement="top-start">
                <el-button
                        v-show="node.level === 1"
                        type="text"
                        size="mini"
                        circle
                        icon="el-icon-plus"
                        @click="addSectionButton(node)">
            </el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="编辑标题" placement="top-start">
                <el-button
                        type="success"
                        size="mini"
                        circle
                        icon="el-icon-edit"
                        @click="editTitle(node)">
            </el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="编辑资源" placement="top-start">
             <el-button
                     v-show="node.level === 2"
                     type="success "
                     size="mini"
                     icon="el-icon-folder"
                     circle
                     @click="() => editFile(node)">
            </el-button>
                </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                <el-button
                        type="danger"
                        size="mini"
                        circle
                        icon="el-icon-delete"
                        @click="deleteMenu(node)">
            </el-button>
                  </el-tooltip>
        </span>
      </span>
        </el-tree>

        <el-dialog width="500px" title="" :visible.sync="playCourseVideoVisible">
            <video-player
                    ref="videoPlayer"
                    class="video-player vjs-custom-skin"
                    :playsinline="true"
                    :options="playerOptions"
            />
        </el-dialog>

        <el-dialog width="400px" title="编辑课程资源" :visible.sync="addCourseFileVisible">
            <el-form :rules="addCourseFileRules">
                <el-form-item label="目前资源">
                    <span style="color: #79BBFF">{{sectionNodeData.fileName}}</span>
                </el-form-item>
                <el-form-item label="上传资源"  ref="uploadFile">
                    <el-upload
                            class="upload-demo"
                            drag
                            name="file"
                            action="http://localhost:8080/course/menu/uploadFile"
                            :on-success="fileUploadSuccess">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传mp4,PPT 大小限制在500M以内</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" style="text-align: center" class="dialog-footer">
                <el-button type="primary" @click="editFileSubmit">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog width="400px" title="添加章" :visible.sync="addChapterVisible">
            <el-form :model="addChapterForm" :rules="addChapterRules" ref="addChapterForm">
                <el-form-item label="章名称" prop="addChapterName">
                    <el-input autocomplete="off" v-model="addChapterForm.addChapterName"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" style="text-align: center" class="dialog-footer">
                <el-button type="primary" @click="addChapter('addChapterForm')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog width="400px" title="添加小节" :visible.sync="addSectionVisible">
            <el-form :model="addSectionForm" :rules="addSectionRules" ref="addSectionForm">
                <el-form-item label="小节名称" prop="addSectionName">
                    <el-input autocomplete="off" v-model="addSectionForm.addSectionName"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" style="text-align: center" class="dialog-footer">
                <el-button type="primary" @click="addSection('addSectionForm')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog width="400px" title="修改小节标题" :visible.sync="updateSectionFormVisible">
            <el-form :model="updateSectionNameForm" :rules="updateSectionRules" ref="updateSectionNameForm">
                <el-form-item label="小节标题" prop="updateSectionName">
                    <el-input autocomplete="off" v-model="updateSectionNameForm.updateSectionName"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" style="text-align: center" class="dialog-footer">
                <el-button type="primary" @click="updateSectionTitle('updateSectionNameForm')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog width="400px" title="修改章标题" :visible.sync="updateChapterFormVisible">
            <el-form :model="updateChapterNameForm" :rules="updateChapterRules" ref="updateChapterNameForm">
                <el-form-item label="章标题" prop="updateChapterName">
                    <el-input autocomplete="off" v-model="updateChapterNameForm.updateChapterName"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" style="text-align: center" class="dialog-footer">
                <el-button type="primary" @click="updateChapterTitle('updateChapterNameForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        inject: ['reload'],
        data() {
            return {
                courseId: "",
                playCourseVideoVisible: false,
                addChapterVisible: false,
                addSectionVisible: false,
                updateSectionFormVisible: false,
                updateChapterFormVisible: false,
                addCourseFileVisible: false,
                addChapterForm: {addChapterName: ""},
                addSectionForm: {addSectionName: ""},
                playVideoPath: "",
                playerOptions: {
                    sources: [
                        {
                            type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                            src: "" // url地址
                        }
                    ]
                },
                sectionNodeData: {
                    title: "",
                    fileName: "",
                },
                addSectionData: {
                    id: "",
                    title: ""
                },
                updateChapterData: {
                    id: "",
                    title: ""
                },
                updateSectionData: {
                    id: "",
                    title: ""
                },
                updateChapterNameForm: {updateChapterName: ""},
                updateSectionNameForm: {updateSectionName: ""},
                editFileData: {
                    id: "",
                    fileName: "",
                    filePath: ""
                },
                menuData: [],
                menuProps: {
                    children: 'chapterSectionList',
                    label: 'title',
                },
                addChapterRules: {
                    addChapterName: [{required: true, message: "章名不能为空", trigger: 'blur'},
                        {min: 3, max: 15, message: "长度在3到15个字符之间"}],
                },
                addSectionRules: {
                    addSectionName: [{required: true, message: "小节名不能为空", trigger: 'blur'},
                        {min: 3, max: 15, message: "长度在3到15个字符之间"}],
                },
                updateSectionRules: {
                    updateSectionName: [{required: true, message: "小节名不能为空", trigger: 'blur'},
                        {min: 3, max: 15, message: "长度在3到15个字符之间"}],
                },
                updateChapterRules: {
                    updateChapterName: [{required: true, message: "章名不能为空", trigger: 'blur'},
                        {min: 3, max: 15, message: "长度在3到15个字符之间"}],
                },
                addCourseFileRules:{
                   // uploadFile:[{required:true,message:"请上传课程资源"}]
                }
            }
        },
        methods: {
            getParams() {
                this.courseId = this.$route.query.courseId;
            },
            editFile(node) {
                this.sectionNodeData.fileName = node.data.fileName
                this.editFileData.id = node.data.id;
                this.addCourseFileVisible = true;
            },
            addChapterVisibleForm() {
                this.addChapterVisible = true;
            },
            playVideo(node) {
                this.playCourseVideoVisible = true;
                this.playerOptions.sources[0].src = node.data.filePath

            },
            addChapter(formName) {
                let data = {
                    courseId: this.courseId,
                    title: this.addChapterForm.addChapterName
                }
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        this.axios.post(this.urls.addChapter, data)
                            .then((res) => {
                                if (res.data.code === 200) {
                                    this.$message.success("添加成功")
                                    this.addChapterVisible = false;
                                    this.reload()
                                }
                            })
                    }else{
                        return false;
                    }
                })

            },
            addSectionButton(node) {
                this.addSectionVisible = true
                this.addSectionData.id = node.data.id
            },
            addSection(formName) {
                this.$refs[formName].validate((valid)=>{
                    this.addSectionData.title = this.addSectionForm.addSectionName
                    if(valid){
                        this.axios.post(this.urls.addSection, this.addSectionData)
                            .then((res) => {
                                if (res.data.code === 200) {
                                    this.$message.success("添加成功")
                                    this.addChapterVisible = false;
                                    this.reload()
                                }
                            })
                    }else{
                        return false;
                    }
                })
            },
            editTitle(node) {
                // 章
                if (node.level === 1) {
                    this.updateChapterData.id = node.data.id;
                    this.updateChapterNameForm.updateChapterName = node.data.title
                    this.updateChapterFormVisible = true
                }
                // 节
                if (node.level === 2) {
                    this.updateSectionData.id = node.data.id;
                    this.updateSectionNameForm.updateSectionName = node.data.title
                    this.updateSectionFormVisible = true
                }
            },
            updateSectionTitle(formName) {
                this.updateSectionData.title = this.updateSectionNameForm.updateSectionName
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        this.axios.post(this.urls.updateSectionTitle, this.updateSectionData)
                            .then((res) => {
                                if (res.data.code === 200) {
                                    this.updateSectionFormVisible = false;
                                    this.reload();
                                }
                            })
                    }else{
                        return false;
                    }
                })
            },
            updateChapterTitle(formName) {
                this.updateChapterData.title = this.updateChapterNameForm.updateChapterName
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        this.axios.post(this.urls.updateChapterTitle, this.updateChapterData)
                            .then((res) => {
                                if (res.data.code === 200) {
                                    this.updateChapterFormVisible = false;
                                    this.reload()
                                }
                            })
                    }else{
                        return false;
                    }
                })
            },
            deleteMenu(node) {
                if (node.level === 1) {
                    this.$confirm("确定要删除 " + node.data.title + " 这一章吗? 这将会删除其下的所有小节", "删除", {
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.axios.get(this.urls.deleteChapter + node.data.id)
                            .then((res) => {
                                if (res.data.code === 200) {
                                    this.$message.success("删除成功")
                                    this.reload()
                                }
                            })
                    })
                }
                if (node.level === 2) {
                    this.$confirm("确定要删除 " + node.data.title + " 这一小节吗?", "删除", {
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.axios.get(this.urls.deleteSection + node.data.id)
                            .then((res) => {
                                if (res.data.code === 200) {
                                    this.$message.success("删除成功")
                                    this.reload()
                                }
                            })
                    })
                }
            },
            fileUploadSuccess(response, file) {
                this.editFileData.fileName = file.name
                this.editFileData.filePath = response.data
                // 关闭文件上传非空验证提示
                this.$refs["uploadFile"].clearValidate()
            },
            editFileSubmit() {
                // this.$refs.uploadFile.validate((valid)=> {
                //         if(valid){
                            this.axios.post(this.urls.updateSectionFile, this.editFileData)
                                .then((res) => {
                                    if (res.data.code === 200) {
                                        this.$message.success("编辑成功")
                                        this.addCourseFileVisible = false
                                        this.reload();
                                    }
                                })
                //         }else{
                //             return false;
                //         }
                // })
            }
        },
        created() {
            this.getParams();
            this.axios.get(this.urls.getCourseChapterSectionList + this.courseId)
                .then((res) => {
                    if (res.data.code === 200)
                        this.menuData = res.data.data;
                })
        }
    }
</script>

<style>
    .el-tree-node__content {
        display: flex;
        align-items: center;
        height: 45px;
        cursor: pointer;
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>